<!-- 转岗申请 -->
<template>
  <div>
    <div class="eda-main-title">
      <div class="top-icon">
        <img src="../../../assets/img/personnelImage/创建流程图.png"/>
      </div>
      <div class="top-title">
        流程:创建 - 人事岗位调动 - 创建
      </div>
      <div class="top-operate">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="primary" @click="this.$router.push({path: '/emp-abnormal/tfa'})">取消</el-button>
      </div>
    </div>
    <div class="eda-main">
      <div class="main-middle">
        <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
                 size="default" @submit.prevent>
          <div class="table-container">
            <table class="table-layout">
              <tbody>
              <tr>
                <td colspan="3">
                  <div class="static-content-item">
                    <div>基本信息</div>
                  </div>
                </td>
              </tr>
              <tr style="background: #F8F9FA">
                <td>
                  <div class="static-content-item">
                    <div>标题</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>申请人</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>调动日期</div>
                  </div>
                </td>
              </tr>
              <tr style="background: #F8F9FA">
                <td>
                  <el-form-item label="" label-width="0" prop="title">
                    <el-input v-model="formData.title" type="text" clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="sqr">
                    <el-input v-model="formData.sqr" @focus="dialogTableVisible = true" type="text" clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="transferTime">
                    <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="formData.transferTime"
                        type="date"
                        :disabled-date="publishDateAfter"
                        placeholder="选择日期">
                    </el-date-picker>
<!--                    :picker-options="pickerOptions"-->
<!--                    <el-date-picker v-model="" type="date"-->
<!--                                    class="full-width-input"-->
<!--                                    format="YYYY-MM-DD"-->
<!--                                    value-format="YYYY-MM-DD"-->

<!--                                    clearable></el-date-picker>-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                </td>
              </tr>
              <tr>
                <td>
                  <div class="static-content-item">
                    <div>原上级</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>原部门</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>原岗位</div>
                  </div>
                </td>

              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="osj">
                    <el-input v-model="formData.osj" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="ybm">
                    <el-input v-model="formData.ybm" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="ybm">
                    <el-input v-model="formData.ygw" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="static-content-item">
                    <div>新上级</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>新部门</div>
                  </div>
                </td>
                <td>
                  <div class="static-content-item">
                    <div>新岗位</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="" label-width="0" prop="nsj">
                    <el-input v-model="formData.nsj" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="targetDeptName">
                    <el-input v-model="formData.targetDeptName" type="text" @focus="newTableVisible = true" readonly clearable></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="" label-width="0" prop="targetPositionName">
                    <el-input v-model="formData.targetPositionName" type="text" readonly clearable></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <el-form-item label="调动原因" prop="cause">
                    <el-input type="textarea" v-model="formData.cause" rows="3"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="调岗员工">
    <el-table :data="gridData" @row-click="byval">
      <el-table-column property="id" label="编号" width="200" />
      <el-table-column property="empName" label="姓名" width="auto"/>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :total="paging.total"
        :page-size="paging.pageSize"
        :hide-on-single-page="hidePaging"
    />
  </el-dialog>
  <el-dialog v-model="newTableVisible" title="负责人">
    <el-table :data="newChoice" @row-click="newChoiceByval">
<!--      <el-table-column property="id" label="编号" width="80" />-->
      <el-table-column property="dept.principalName" label="姓名" width="auto"/>
      <el-table-column property="dept.deptName" label="部门" width="auto"/>
      <el-table-column property="position.name" label="岗位" width="auto"/>
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :total="paging.total"
        :page-size="paging.pageSize"
        :hide-on-single-page="hidePaging"
    />
  </el-dialog>

</template>

<script>
import {getEmpPageInfo} from "../../../network/emp";
import {adddj} from "../../../network/per/emplHandling";

export default {
  data() {
    return {
      paging:{
        total: 100,//记录总数
        pageSize: 9,//每页记录数
        pageNum: 1,//当前页码
        pagerCount: 8,//最大页码按钮数，限定在(5 ≤ x ≤ 21 的奇数)
      },
      hidePaging: false,
      gridData: [],
      newChoice:[],
      dialogTableVisible: false,
      newTableVisible: false,
      formData: {
        title: "",
        // 原
        sqr: "",
        ybm: "",
        ygw:"",
        osj: "",

        // 新
        targetDeptName: "",
        nsj: "",
        targetPositionName: "",
        transferTime: new Date(),
        wwc: "",
        // p
        cause: "",

        // 参数
        targetDeptId:null,
        targetPositionId:null,
        deptId:null,
        empId:null,
        originalPositionId:null,
      },
      rules: {},
    }
  },
  mounted() {
    getEmpPageInfo({
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize
        }).then((das)=>{
      console.log("das ",das)
      this.gridData = das.list
      this.newChoice = das.list
      this.paging.total = das.total;
      this.paging.pageNum = das.pageNum
      this.paging.pageSize =  das.pageSize
    });
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      getEmpPageInfo(
          {
            pageNum: val,
            pageSize: this.paging.pageSize
          }
      ).then((das)=>{
        console.log("das ",das)
        this.gridData = das.list
        this.newChoice = das.list
        this.paging.total = das.total;
        this.paging.pageNum = das.pageNum
        this.paging.pageSize =  das.pageSize
      });
    },
    publishDateAfter(time){
       return time.getTime() <= Date.now();
    },
    newChoiceByval(row){
      this.formData.supeNumber = row.dept.principalId;
      this.formData.targetDeptId = row.dept.id;
      this.formData.targetPositionId = row.position.id;

      this.formData.nsj = row.dept.principalName;
      this.formData.targetDeptName = row.dept.deptName;
      this.formData.targetPositionName = row.position.name;
    },
    byval(row){
      this.formData.deptId = row.dept.id;
      this.formData.empId = row.id;
      this.formData.originalPositionId = row.position.id;

      this.formData.sqr = row.resume.name;
      this.formData.title = row.resume.name + " - 岗位调动申请";
      this.formData.osj = row.superior.empName;
      this.formData.ybm = row.dept.deptName;
      this.formData.ygw = row.position.name;

    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
        adddj(this.formData).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
            this.$router.push({path: '/emp-abnormal/tfa'})
            }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/EDemandApp";
</style>